<template>
    <div class="recommend">
            <div class="alertLocation" id="alertLocation">
                <div class="getphyscoord">
                    <div class="allHead">
                        <div class="get-header">
                            <div class="backLeft" @click="alertLocationCell">
                                <i class="get-icon">&#xe600;</i>
                            </div>
                            <div class="get-inputDiv">
                                <i class="get-icon">&#xe643;</i>
                                <input type="text" placeholder="搜索其他城市" id="inputCity">
                            </div>

                            <button class="searchButton" @click="searchCity()">搜索</button>
                        </div>
                    </div>
                    <div class="cxResult">
                        <div v-for="item in searchCityData" :key="item.id" ref="cxResult">
                            <p @click="setCity(item.name)" class="cxResultP">{{item.name}}</p>
                        </div>
                    </div>
                    <p style="margin-bottom: 15px;width: 100%;height: 1px;background: #eeeeee"></p>
                    <div class="cur-location">
                        <p>当前</p>
                        <ul class="curHotUl">
                            <li>
                                <div id="currentCity">
                                    <i class="get-icon">&#xe609;</i>
                                    <span>{{cityName}}1324</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="hot-city">
                        <p>热门城市</p>
                        <ul class="curHotUl">
                            <li v-for="item in hotCity" :key="item.id">
                                <div>{{item}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="search" id="searchJd">
                <div class="allHead">
                    <div class="get-header">
                        <div class="backLeft" @click="alertLocationCell2()">
                            <i class="get-icon">&#xe600;</i>
                        </div>
                        <div class="get-inputDiv">
                            <i class="get-icon">&#xe643;</i>
                            <input type="text" placeholder="搜索热门景点或路线">
                        </div>
                        <button class="searchButton">搜索</button>
                    </div>
                </div>
                <p style="margin-bottom: 15px;width: 100%;height: 1px;background: #eeeeee"></p>
                <div class="cur-location">
                    <p>搜索历史</p>
                    <ul class="curHotUl">
                        <li>
                            <div>峨眉山 </div>
                        </li>
                        <li>
                            <div>青城山</div>
                        </li>
                        <li>
                            <div>剑门关</div>
                        </li>
                        <li>
                            <div>九寨沟</div>
                        </li>
                    </ul>
                </div>
            </div>
            <Header class="re-header">
                <div class="re-headerSearch">
                    <div class="siteDiv" @click="alertLocation()">
                        <i class="re-icon">&#xe609;</i>
                        <div :style="{width:'100%',height:'300px',display:'none'}">
                            <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
                            </el-amap>
                        </div>
                        <span>{{cityName}}</span>
                    </div>
                    <div class="search-inputDiv" @click="alertLocation2()">
                        <i class="re-icon searchIcon">&#xe643;</i>
                        <div class="inputDiv">
                            <input type="text" placeholder="搜索..." id="re-searchInput"/>
                        </div>
                    </div>
                </div>
            </Header>
            <div class="re-banner">
                <mt-swipe>
                    <mt-swipe-item></mt-swipe-item>
                    <mt-swipe-item></mt-swipe-item>
                    <mt-swipe-item></mt-swipe-item>
                </mt-swipe>
            </div>
        <v-touch @swipeleft="swiperleft" class="wrapper">
            <div class="quick-menu">
                <div class="menus">
                    <div class="menus-list" @click="goTo('/quickmenu/recomspots')">
                        <img src="../../assets/jindiang.png" alt="">
                        <p>景点</p>
                    </div>
                </div>
                <div class="menus">
                    <div class="menus-list" @click="goTo('/quickmenu/recomhotel')">
                        <img src="../../assets/jiudian.png" alt="">
                        <p>酒店</p>
                    </div>
                </div>
                <div class="menus">
                    <div class="menus-list" @click="goTo('/quickmenu/recomfood')">
                        <img src="../../assets/meishi.png" alt="">
                        <p>美食</p>
                    </div>
                </div>
                <div class="menus">
                    <div class="menus-list" @click="goToLvyou('/recomdonkey')">
                        <img src="../../assets/luxian.png" alt="">
                        <p>驴友</p>
                    </div>
                </div>
            </div>
            <div class="attractions">
                <div class="attrCenter">
                    <div class="reMoreHeader">
                        <div class="left" @click="attractions">
                            景点排行
                        </div>
                        <div class="right" @click="goTo('/attractionstopics')">
                            查看更多 <i class="re-icon">&#xe634;</i>
                        </div>
                    </div>
                    <div class="attrTop">
                        <div class="topOne">
                            <img :src="imgNo1" alt="" style="border-radius: 5px">
                        </div>
                        <p style="z-index: 1000;"> <br></p>
                        <div class="topTT">
                            <div class="topTwo">
                                <img :src="imgNo2" alt="" style="border-radius: 5px">
                            </div>
                            <div class="topThree">
                                <img :src="imgNo3" alt="" style="border-radius: 5px">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="recommendedRoute" @click="changeData()">
                <div>
                    <p>路线推荐</p>
                    <div>
                        <p>查看更多</p>
                        <i class="recommendedRoute-icon">&#xe634;</i>
                    </div>
                </div>
                <ul>
                    <li>
                        <img src="../../assets/qingchengshan.png" alt="">
                        <p>青城山都江堰1/2日路线</p>
                    </li>
                    <li>
                        <img src="../../assets/jiuzhaigou.png" alt="">
                        <p>九寨沟3日游路线</p>
                    </li>
                    <li>
                        <img src="../../assets/emeishan.png" alt="">
                        <p>峨眉山1/2日线路</p>
                    </li>
                </ul>
            </div>
            <div class="reStrategy" @click="changeData()">
                <div class="reStrCenter">
                    <div class="reMoreHeader">
                        <div class="left">
                            攻略推荐
                        </div>
                    </div>
                    <div class="reStrategyContext">
                        <div class="reSAll">
                            <ul>
                                <li>
                                    <div class="reS-top">
                                        <i class="re-icon">&#xe601;</i>
                                        <img src="../../assets/jzg.png" alt="">
                                        <div>
                                            <i class="re-icon">&#xe609;</i>
                                            <span>九寨沟</span>
                                        </div>
                                    </div>
                                    <div class="reS-intro">
                                        <p>漫漫秋色，九寨容华九寨沟刚重新开园不久，就...</p>
                                    </div>
                                    <div class="reS-like">
                                        <div class="left">
                                            <img src="../../assets/head.jpg" alt="">
                                            <span>July</span>
                                        </div>
                                        <div class="right">
                                            <i class="re-icon">&#xe602;</i> <span></span>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="reS-top">
                                        <i class="re-icon">&#xe601;</i>
                                        <img src="../../assets/kzxz.png" alt="">
                                        <div>
                                            <i class="re-icon">&#xe609;</i>
                                            <span>宽窄巷子</span>
                                        </div>
                                    </div>
                                    <div class="reS-intro">
                                        <p>宽窄巷子是成都唯一留下来的清朝古街道</p>
                                    </div>
                                    <div class="reS-like">
                                        <div class="left">
                                            <img src="../../assets/head/head2.png" alt="">
                                            <span>boby</span>
                                        </div>
                                        <div class="right">
                                            <i class="re-icon">&#xe602;</i> <span>152</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <div class="reS-top">
                                        <i class="re-icon">&#xe601;</i>
                                        <img src="../../assets/jyq.png" alt="">
                                        <div>
                                            <i class="re-icon">&#xe609;</i>
                                            <span>九眼桥</span>
                                        </div>
                                    </div>
                                    <div class="reS-intro">
                                        <p>成都夜生活最热闹的地方——安顺廊桥</p>
                                    </div>
                                    <div class="reS-like">
                                        <div class="left">
                                            <img src="../../assets/head/head5.jpeg" alt="">
                                            <span>Lily</span>
                                        </div>
                                        <div class="right">
                                            <i class="re-icon">&#xe602;</i> <span>965</span>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="reS-top">
                                        <i class="re-icon">&#xe601;</i>
                                        <img src="../../assets/dcyd.png" alt="">
                                        <div>
                                            <i class="re-icon">&#xe609;</i>
                                            <span>稻城亚丁</span>
                                        </div>
                                    </div>
                                    <div class="reS-intro">
                                        <p>稻城亚丁 | 蓝色星球的最后一片净土真的不考虑来看看吗</p>
                                    </div>
                                    <div class="reS-like">
                                        <div class="left">
                                            <img src="../../assets/head/head4.jpg" alt="">
                                            <span>Kylh</span>
                                        </div>
                                        <div class="right">
                                            <i class="re-icon">&#xe602;</i> <span>85</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div >
            <div class="" style="height: 60px;"></div>
        </v-touch>
    </div>
</template>
<script>
    import Header from '../../components/Header';

    export default {
        data() {
            let self = this;
            return {
                center: [121.59996, 31.197646],
                lng: 0,
                lat: 0,
                cityName: "德阳市",
                loaded: false,
                plugin: [{
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 100,          //超过10秒后停止定位，默认：无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
                    showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy: true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
                    extensions: 'all',
                    pName: 'Geolocation',
                    events: {
                        init(o) {
                            // o 是高德地图定位插件实例
                            o.getCurrentPosition((status, result) => {
                                // console.log(result.addressComponent);
                                if (result && result.position) {
                                    self.lng = result.position.lng;
                                    self.lat = result.position.lat;
                                    self.cityName = result.addressComponent.city;
                                }
                            });
                        }
                    }
                }],
                hotCity: ["北京", "香港", "上海", "厦门", "成都", "西安", "重庆"],
                searchCityData: [],
                chengdu:"成都市",
                attractionsData:[],
                fireAttractions:[],
                imgNo1:'',
                imgNo2:'',
                imgNo3:''
            }
        },
        components: {
            Header
        },
        mounted(){
            this.attractions();
        },
        methods: {
            goTo(path) {
                this.$router.replace(path)
            },
            goToLvyou(path){
                let userNameLogin = this.$cookies.get('user_name');
                console.log(userNameLogin);
                if (userNameLogin === null) {
                    alert("需登陆后才能查看驴友");
                    this.$router.replace('/login');
                } else {
                    this.$router.replace(path);
                }
            },
            alertLocation() {
                let alertLocation = document.getElementById("alertLocation");
                alertLocation.style.display = "block";
            },
            alertLocation2() {
                let searchJd = document.getElementById("searchJd");
                searchJd.style.display = "block";
            },
            alertLocationCell() {
                let alertLocation = document.getElementById("alertLocation");
                alertLocation.style.display = "none";
            },
            alertLocationCell2() {
                let searchJd = document.getElementById("searchJd");
                searchJd.style.display = "none";
            },
            searchCity() {
                let inputCity = document.getElementById("inputCity").value;
                // console.log("输入框的值：" + inputCity);
                this.axios.get("http://10.30.21.218/district/keyword?keyWords=" + inputCity).then((res) => {
                    let status = res.data.code;
                    console.log(status);
                    if (status === 200) {
                        let cityData = res.data.data;
                        console.log(cityData);
                        this.searchCityData = cityData;
                    } else {
                        alert("请输入目的地");
                    }
                });
            },
            setCity(e){
                console.log(e);
                this.cityName = e;
                this.alertLocationCell();
            },
            attractions(){
                this.axios.get('http://10.30.21.218/scenic',{
                    params:{
                        adcode:'510000',
                        id:'3433',
                        name:'四川省',
                        pageNum:'1',
                        pageSize:'3',
                        showChild:false
                    }
                })
                .then((res) => {
                    this.fireAttractions = res.data.data.list;
                    console.log(this.fireAttractions);
                    this.imgNo1 = this.fireAttractions[0].parent.images.split(",")[0].slice(2);
                    this.imgNo2 = this.fireAttractions[1].parent.images.split(",")[0].slice(2);
                    this.imgNo3 = this.fireAttractions[2].parent.images.split(",")[0].slice(2);
                    this.imgNo1 = this.imgNo1.substring(0,this.imgNo1.length-1);
                    this.imgNo2 = this.imgNo2.substring(0,this.imgNo2.length-1);
                    this.imgNo3 = this.imgNo3.substring(0,this.imgNo3.length-1);
                })
            },
            swiperleft() {  //左划切换到goods页
                this.$router.push({'path':'/pertailor'});
            }
        }
    }
</script>
<style>
    .alertLocation,.search {
        width: 100%;
        height: 100vh;
        background: white;
        position: fixed;
        top: 0;
        z-index: 1000;
        display: none;
    }
    .cxResult {
        width: 520px;
        height: 200px;
        margin: 0 auto;
        overflow: auto;
    }

    .cxResult > div {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #eeeeee;
        line-height: 50px;
    }

    .cxResult > div > p {
        font-size: 26px;
    }

    .re-icon {
        font-family: iconfont;
        font-style: normal;
        font-size: 28px;
    }

    .re-header {
        width: 100%;
        position: absolute;
        z-index: 100;
    }

    /*...............................................*/
    /*....搜索框....*/
    .re-headerSearch {
        width: 95%;
        height: 60px;
        margin: 66px auto;
        display: flex;
        position: absolute;
        z-index: 100;
    }

    .siteDiv {
        flex: 2;
        text-align: center;
        line-height: 60px;
        color: white;
    }

    .siteDiv > span {
        font-size: 28px;
    }

    .search-inputDiv {
        flex: 8;
        display: flex;
        background: white;
        border-radius: 30px;
    }

    .search-inputDiv > .searchIcon {
        flex: 1;
        text-align: right;
        line-height: 60px;
        display: block;
        width: 100%;
        height: 100%;
        font-size: 30px;
        background: white;
        border-bottom-left-radius: 30px;
        border-top-left-radius: 30px;
    }

    .search-inputDiv > .inputDiv {
        flex: 9;
        border-bottom-right-radius: 30px;
        border-top-right-radius: 30px;
    }

    .inputDiv > input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        text-indent: 20px;
        border-bottom-right-radius: 30px;
        border-top-right-radius: 30px;
    }

    /*....搜索框....*/
    /*....Banner....*/
    .re-banner {
        width: 100%;
        height: 345px;
    }

    .mint-swipe-item:nth-child(1) {
        background: url("../../assets/banner1.png");
        background-size: 100% 100%;
    }

    .mint-swipe-item:nth-child(2) {
        background: url("../../assets/banner2.png");
        background-size: 100% 100%;
    }

    .mint-swipe-item:nth-child(3) {
        background: url("../../assets/banner3.png");
        background-size: 100% 100%;
    }

    .mint-swipe-indicator {
        width: 20px !important;
        height: 20px !important;
        opacity: 0.8 !important;
        background: gray !important;
    }

    .mint-swipe-indicators > .is-active {
        background: white !important;
    }

    /*....Banner....*/
    /*....quick-menu....*/
    .quick-menu {
        width: 640px;
        height: 192px;
        border: 1px solid #e6e6e6;
        box-shadow: 3px 5px 10px #dfdfdf;
        margin: 30px auto;
        border-radius: 30px;
        display: flex;
    }

    .menus {
        width: 160px;
        height: 100%;
        text-align: center;
    }

    .menus-list > img {
        width: 96px;
        height: 96px;
        margin: 25px auto;
        bottom: 0;
    }

    .menus:nth-child(even) img {
        width: 96px;
        height: 80px;
    }

    .menus-list {
        height: 100%;
        position: relative;
    }

    .menus-list > p {
        font-size: 28px;
        margin-bottom: 32px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    /*....quick-menu....*/
    /*attractions*/
    .attractions {
        height: 414px;
    }

    .attrCenter {
        width: 688px;
        height: 414px;
        margin: 0 auto;
    }

    .reMoreHeader {
        width: 100%;
        height: 76px;
        display: flex;
        justify-content: space-between;
    }

    .reMoreHeader > div {
        text-align: center;
        line-height: 76px;
    }

    .reMoreHeader > .left {
        width: 164px;
        height: 100%;
        font-size: 36px;
        padding-left: 20px;
    }

    .reMoreHeader > .right {
        width: 164px;
        height: 100%;
        font-size: 24px;
    }

    .attrTop {
        width: 688px;
        height: 336px;
        display: flex;
        justify-content: space-between;
    }

    .attrTop > div {
        width: 336px;
        height: 336px;
    }

    .attrTop > .topOne > img {
        width: 336px;
        height: 336px;
        display: block;
    }

    .attrTop > .topOne {
        position: relative;
    }

    .attrTop > .topTT {
        position: relative;
    }

    .attrTop > .topTT > div {
        width: 336px;
        height: 160px;
    }

    .attrTop > .topTT > div > img {
        width: 336px;
        height: 160px;
    }

    .topThree {
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .attrTop > .topOne:before {
        content: "";
        position: absolute;
        width: 40px;
        height: 48px;
        background: url("../../assets/no1.png");
        background-size: 100% 100%;
        left: 10%;
    }

    .attrTop .topTwo:before {
        content: "";
        position: absolute;
        width: 40px;
        height: 48px;
        background: url("../../assets/no2.png");
        background-size: 100% 100%;
        left: 10%;
    }

    .attrTop .topThree:before {
        content: "";
        position: absolute;
        width: 40px;
        height: 48px;
        background: url("../../assets/no3.png");
        background-size: 100% 100%;
        left: 10%;
    }

    /*attractions*/
    /*reStrategy*/
    .reStrategy {
        margin-top: 52px;
    }

    .reStrCenter {
        width: 688px;
        margin: 0 auto;
    }

    /*................*/
    .reSAll {
        width: 686px;
        height: 100%;
        display: flex;
        justify-content: space-between;
    }

    .reSAll > ul {
        width: 334px;
        height: 100%;
    }

    .reSAll > ul > li {
        width: 334px;
        height: 604px;
        margin-bottom: 42px;
        box-shadow: 1px 10px 10px #eee;
        border: 1px solid #eee;
    }

    .reSAll > ul:nth-child(odd) > li:nth-child(even), .reSAll > ul:nth-child(even) > li:nth-child(odd) {
        width: 334px;
        height: 522px;
        margin-bottom: 42px;
        box-shadow: 1px 10px 10px #eee;
        border: 1px solid #eee;
    }

    .reS-top {
        width: 100%;
        height: 468px;
        position: relative;
    }

    .reSAll > ul:nth-child(odd) > li:nth-child(even) > .reS-top, .reSAll > ul:nth-child(even) > li:nth-child(odd) > .reS-top {
        height: 386px;
    }

    .reS-top > img {
        width: 100%;
        height: 100%;
    }

    .reS-top > i, .reS-top > div {
        position: absolute;
        color: white;
    }

    .reS-top > i {
        right: 0;
    }

    .reS-top > div {
        width: 130px;
        height: 45px;
        display: inline-block;
        left: 14px;
        bottom: 16px;
        text-align: center;
        line-height: 45px;
        border-radius: 10px;
        background: #333;
    }

    .reS-intro {
        margin: 5px 0;
    }

    .reS-like {
        width: 320px;
        height: 40px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        font-size: 22px;
        line-height: 40px;
    }

    .reS-like > .left {
        width: 140px;
        height: 40px;
        position: relative;
    }

    .reS-like > .left > img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .reS-like > .left > span {
        display: inline-block;
        height: 40px;
        position: absolute;
        left: 50px;
    }

    .reS-like > .right {
        height: 40px;
    }

    .reS-like > .right > i {
        font-size: 36px;
    }

    /*reStrategy*/
    .get-icon {
        font-family: iconfont;
        font-style: normal;
        font-size: 24px;
    }

    .allHead {
        width: 100%;
        height: 173px;
        background: #EC9B38;
        position: relative;
    }

    .get-header {
        display: flex;
        width: 670px;
        height: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        justify-content: space-between;
    }

    .get-header > .backLeft {
        width: 68px;
        height: 100%;
    }

    .backLeft > .get-icon {
        color: white;
    }

    .get-header > .get-inputDiv {
        width: 520px;
        display: flex;
    }

    .get-inputDiv > i {
        width: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        border-bottom-left-radius: 30px;
        border-top-left-radius: 30px;
        background: #e5e5e5;
    }

    .get-inputDiv > input {
        width: 100%;
        border: none;
        outline: none;
        line-height: 60px;
        border-bottom-right-radius: 30px;
        border-top-right-radius: 30px;
        background: #e5e5e5;
        font-size: 30px;
    }

    .searchButton {
        width: 68px;
        border: none;
        background: none;
        outline: none;
        color: white;
        font-size: 28px;
    }

    /*.....get-header.....*/

    /*.....cur-location.....*/
    .allCity {
        width: 100%;
        height: auto;
        background: hotpink;
        top: 620px;
        position: absolute;
    }

    .allCityCenter {
        width: 680px;
        height: auto;
        display: flex;
        justify-content: space-between;
        background: #e8a41c;
        margin: 0 auto;
    }

    .cityIndex {
        position: fixed;
        right: 3%;
    }

    .cur-location, .hot-city {
        width: 686px;
        margin: 0 auto;
    }

    .cur-location > p, .hot-city > p {
        width: 124px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 28px;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .curHotUl {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .curHotUl > li {
        width: 228px;
        height: 56px;
        text-align: center;
        line-height: 56px;
        font-size: 28px;
        margin: 10px 0;
    }

    #currentCity {
        background: #EC9B38;
        color: white;
    }

    .curHotUl > li > div {
        width: 170px;
        height: 56px;
        margin: 0 auto;
        background: #e5e5e5;
        border-radius: 15px;
    }

    .van-index-bar__sidebar {
        top: 65% !important;
    }

    .van-index-bar__index {
        display: block !important;
        color: rgb(7, 193, 96);
        font-size: 30px !important;
        margin: 10px 0;
    }

    .van-cell__title > span, .van-index-anchor {
        font-size: 30px !important;
    }

    .van-index-anchor {
        margin: 10px 0;
    }

    .city_index {
        width: 20px;
        border-left: 1px #e6e6e6 solid;
    }

    /*.....cur-location.....*/


    /*路线推荐*/
    .recommendedRoute{
        width: 100%;
        height: 420px;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .recommendedRoute > div:nth-child(1){
        width: 650px;
        height: 70px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .recommendedRoute > div:nth-child(1) > p{
        font-size: 36px;
        color: #333333;
    }
    .recommendedRoute-icon {
        font-size: 16px;
        color: #999999;
        font-family: iconfont;
        font-style: normal;
    }
    .recommendedRoute > div:nth-child(1) > div:nth-child(2){
        display: flex;
        flex-direction: row;
        height: 24px;
        align-items: center;
    }
    .recommendedRoute > div:nth-child(1) > div:nth-child(2) > p{
        font-size: 24px;
        color: #999999;
    }
    .recommendedRoute > ul:nth-child(2){
        width: 688px;
        height: 360px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        overflow: auto;
    }
    .recommendedRoute > ul:nth-child(2) > li{
        width: 270px;
        height: 340px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-right: 26px;
    }
    .recommendedRoute > ul:nth-child(2) > li > img{
        width: 270px;
        height: 252px;
        border-radius: 20px;
    }
    .recommendedRoute > ul:nth-child(2) > li > p{
        width: 270px;
        height: 58px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 28px;
        color: #44444a;
        margin-top: 10px;
    }
</style>

